<!-- seven-input-box 第一种输入框 -->
<template>
  <div class="seven-input-box">
    <input @input="$emit('input',$event.target.value)">
  </div>
</template>

<script>
import myClass from '@/assets/js/common'
export default {
  name: 'sevenInputBox',
  
  data () {
    return {
      border_active: false, // 错误展示类
      abc:''
    }
  },
  // props: {
  //   'value': {
  //     default: () => {
  //       return ''
  //     }
  //   },
  //   // 输入框placeholder
  //   'h-placeholder': {
  //     default: () => {
  //       return ''
  //     }
  //   },
  //   // 输入框类型type
  //   'h-type': {
  //     default: () => {
  //       return 'text'
  //     }
  //   },
  //   // 0 不校验 1校验下是否为空 2校验下是否为数字
  //   'h-kind': {
  //     default: '0',
  //     validator: function (value) {
  //       // 这个值必须匹配下列字符串中的一个
  //       return ['0', '1', '2', '3'].indexOf(value) !== -1
  //     }
  //   },
  //   // 用来校验 当变化的时候 一般提交的时候变化
  //   'h-check': {
  //     default: 0
  //   },
  //   // 是否底部边框填充为100% boolean
  //   'border-length': {
  //     default: () => {
  //       return true
  //     }
  //   }
  // }, //['value', 'h-placeholder', 'h-type'],
  components: {},

  computed: {},
  watch: {
    // hCheck (after) {
    //   if (this.hKind === '1' && this.value.toString().trim() !== '') {
    //     this.border_active = false
    //   } else if (this.hKind === '1') {
    //     this.border_active = true
    //   }
    //   if (this.hKind === '2' && myClass.provingFloatTwo(this.value.toString())) {
    //     this.border_active = false
    //   } else if (this.hKind === '2') {
    //     this.border_active = true
    //   }
    //   if (this.hKind === '3' && /(^0$)|(^[1-9]+[0-9]*$)/.test(this.value.toString())) {
    //     this.border_active = false
    //   } else if (this.hKind === '3') {
    //     this.border_active = true
    //   }
    // },
    // value (after, before) {
    //   if (this.hKind === '1' && this.value.toString().trim() !== '') {
    //     this.border_active = false
    //   } else if (this.hKind === '1') {
    //     this.border_active = true
    //   }
    //   if (this.hKind === '2' && myClass.provingFloatTwo(this.value.toString())) {
    //     this.border_active = false
    //   } else if (this.hKind === '2') {
    //     this.border_active = true
    //   }
    //   if (this.hKind === '3' && /(^0$)|(^[1-9]+[0-9]*$)/.test(this.value.toString())) {
    //     this.border_active = false
    //   } else if (this.hKind === '3') {
    //     this.border_active = true
    //   }
    // }
  },
  methods: {
    // inputFunc (e, target) {
      // console.log(1)
      // if (this.hKind === '1' && target.value.toString().trim() !== '') {
      //   this.border_active = false
      // } else if (this.hKind === '1') {
      //   this.border_active = true
      // }
      // if (this.hKind === '2' && myClass.provingFloatTwo(target.value.toString())) {
      //   this.border_active = false
      // } else if (this.hKind === '2') {
      //   this.border_active = true
      // }
      // if (this.hKind === '3' && /(^0$)|(^[1-9]+[0-9]*$)/.test(target.value.toString())) {
      //   this.border_active = false
      // } else if (this.hKind === '3') {
      //   this.border_active = true
      // }
    //   this.$emit('input', target.value)
    // }
  },

  mounted () {}
}
</script>
<style lang="stylus" scoped>
$rem = 2.5
.seven-input-box
  position relative
  padding  0.5rem * $rem  0.18rem * $rem 0.5rem * $rem 0.22rem * $rem
  display flex
  justify-content flex-start
  align-items center
  &:after
    content ""
    position absolute
    bottom 0
    left 0
    right 0
    margin 0 auto
    width calc(100% - 1rem)
    height 0.02rem * $rem
    background-color #dddddd
  &.border-width100:after
    width 100%
  &.border-active:after
    background-color #ff0000
  .c-input
    width auto
    height 0.6rem * $rem 
    font-size 0.27rem * $rem
    line-height 0.6rem * $rem
    background-color transparent
    border none
    outline none
    color #333
    flex 1 1 auto
    text-align right
    padding-left 0
  .c-name
    font-size 0.3rem * $rem
    color #1a1e24
    font-weight bold
    padding-right 0.1rem * $rem
    .must-entry
      position absolute
      display flex
      align-items center
      height 100%
      top 0
      left 0.06rem * $rem
      font-size 0.3rem * $rem
      color #ff6b6b
      font-style normal
      line-height normal
</style>
